<template>
    <div v-if="workOrder">
        <van-cell-group style="margin-bottom: 20px;">
            <div class="title_info">
                <div>单号：{{workOrder.worksn}}</div>
                <div class="status_info">{{statusText}}</div>
            </div>
            <van-cell>
                <div class="left_info">
                    <img :src="my_avatar" alt="头像">
                    <div class="content_info">
                        <div>{{workOrder.contents}}</div>
                        <div>
                            <img v-for="(image, i) in images(workOrder.pic)" v-if="image" :key="i" :src="image" height="50px" width="50px" @click="preview(image)">
                        </div>
                        <div class="time_info">{{workOrder.createTime}}</div>
                    </div>
                </div>
            </van-cell>
            <van-cell v-for="item in comments" :key="item.id">
                <div :class="item.kefuId ? 'right_info' : 'left_info'">
                    <img v-if="item.mid" :src="my_avatar" alt="头像">
                    <div class="content_info">
                        <div>{{item.remark}}</div>
                        <div>
                            <img v-for="(image, i) in images(item.pic)" v-if="image" :key="i" :src="image" height="50px" width="50px" @click="preview(image)">
                        </div>
                        <div class="time_info">{{item.createTime}}</div>
                    </div>
                    <div v-if="item.kefuId" class="avatar_info"><img :src="kefu_avatar" alt="头像"><div>{{item.kefuName}}</div></div>
                </div>
            </van-cell>
        </van-cell-group>

		<van-field v-if="!isClose" class="input_panel" v-model="comment" placeholder="请输入您的问题" left-icon="edit" type="textarea">
            <van-button slot="button" size="small" type="danger" @click="addComment">提交</van-button>
		</van-field>    
    </div>
</template>
<script>
import { Steps, Step, ImagePreview } from 'vant';
import kefu_avatar from '@/assets/images/avatar_default.png';
import { WORKORDER_DETAIL, WORKORDER_COMMENT } from '@/api/user';
const STATUS_TEXT = {
    '-1': '工单关闭',
    0: '未处理',
    1: '移交财务处理',
    2: '财务打款',
		3: '仓库处理'
}
export default {
    props: {
        workId: [String, Number]
    },

    data() {
        return {
            my_avatar: this.getUser().avatar,
            kefu_avatar,
            comment: '',
            workOrder: null,
            comments: []
        }
    },
    computed: {
        statusText() {
            return STATUS_TEXT[this.workOrder.status];
        },
        isClose() {
            const status = this.workOrder.status;
            return (status === -1) || (status === 2);
        }
    },

    created() {
        this.initData();
    },

    methods: {
        initData() {
            this.$reqGet(WORKORDER_DETAIL, {id: this.workId}).then(res => {
                this.workOrder = res.data.data;
                this.comments = res.data.comment;
            });
        },
        images(pic) {
            if (!pic) {
                return ''
            };

            return pic.split(',');
        },
        addComment() {
            const comment = {
                workId: this.workOrder.id,
                mid: this.workOrder.mid,
                remark: this.comment
            }
            this.$reqPost(WORKORDER_COMMENT, comment).then(res => {
                if (res.data.data > 0) {
                    this.comments.push(comment);
                    this.comment = '';
                }
            });
        },
        preview(image) {
            ImagePreview([image]);
        }
    },

    components: {
        [Steps.name]: Steps,
        [Step.name]: Step,
        [ImagePreview.name]: ImagePreview
    }
}
</script>

<style lang="scss" scoped>
.left_info {
    display: flex;
    .content_info {
        flex: 1;
    }
    > img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 5px 10px 5px 0;
    }
}
.right_info {
    text-align: right;
    display: flex;
    .content_info {
        flex: 1
    }
    .avatar_info {
        padding: 5px 0 5px 10px;
        text-align: center;
      >img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
}

.input_panel {
    position: fixed;
    bottom: 0;
    border: 1px solid lightgray;
}

.title_info {
    background-color: $red;
    color: white;
    display: flex;
    padding: 10px;
    .status_info {
        flex: 1;
        text-align: right;
    }
}
.time_info {
    color: gray;
    font-size: 12px;
}

</style>
